<template>
  <view class="skeleton-preset">
    <tui-skeleton
      :zIndex="zIndex"
      :preloadData="preloadData"
      unit="px"
    ></tui-skeleton>
  </view>
</template>

<script>
export default {
  props: {
    zIndex: {
      type: Number,
      default: 98,
    },
  },
  data() {
    return {
      preloadData: [],
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      let datas = [];
      for (let i = 0; i < 10; i++) {
        let data1 = {
          top: 15 + 70 * i + "px",
          left: 15 + "px",
          width: 50 + "px",
          height: 50 + "px",
          skeletonType: "fillet",
        };
        let data2 = {
          top: 15 + 70 * i + "px",
          left: 75 + "px",
          width: 285 + "rpx",
          height: 20 + "px",
          skeletonType: "fillet",
        };
        let data3 = {
          top: 45 + 70 * i + "px",
          left: 75 + "px",
          width: 570 + "rpx",
          height: 20 + "px",
          skeletonType: "fillet",
        };
        datas.push(data1);
        datas.push(data2);
        datas.push(data3);
      }
      this.preloadData = datas;
    },
  },
};
</script>

<style lang="scss" scoped>
.skeleton-preset {
  position: relative;
}
</style>
